﻿<Page
    x:Class="Ganjine_Windows10.ItemPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Ganjine_Windows10"
    xmlns:common="using:Ganjine_Windows10.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    FlowDirection="RightToLeft"
    Loaded="Page_Loaded">
    <Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    <DrillInNavigationTransitionInfo />
                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
            </NavigationThemeTransition>
        </TransitionCollection>
    </Page.Transitions>

    <Page.Resources>
        <ResourceDictionary>
            <Storyboard x:Name="ShowProgressStoryboard" BeginTime="00:00:00.300">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="loadingProgress"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <EasingDoubleKeyFrame KeyTime="00:00:00"
                                              Value="1" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="HideProgressStoryboard">
                <DoubleAnimation Storyboard.TargetName="loadingProgress"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 To="0"
                                 Duration="00:00:00"
                                 AutoReverse="False" />
                <DoubleAnimation Storyboard.TargetName="itemsControl"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 To="1"
                                 Duration="00:00:00.200"
                                 AutoReverse="False" />
            </Storyboard>
        </ResourceDictionary>
    </Page.Resources>

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="پیکربندی نوشتار" x:Name="SettingAppBarButton">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#59602;"/>
                </AppBarButton.Icon>
                <AppBarButton.Flyout>
                    <Flyout Closed="Flyout_Closed" Opened="Flyout_Opened" x:Name="SettingFlyout">
                        <StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
                            <TextBlock Margin="0,0,0,5">قلم:</TextBlock>
                            <ComboBox Width="250" x:Name="FontsList" ItemsSource="{Binding FontsList}" Loaded="FontsList_Loaded" SelectionChanged="FontsList_SelectionChanged">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock FontSize="30" FontFamily="{Binding Font}" Text="{Binding Name}"></TextBlock>
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                            <TextBlock Margin="0,15,0,5">اندازه:</TextBlock>
                            <StackPanel Orientation="Horizontal" FlowDirection="LeftToRight">
                                <Slider x:Name="slider" Width="220" Minimum="15" Maximum="80" Value="25" ValueChanged="slider_ValueChanged"  />
                                <TextBlock x:Name="sliderValue" Text="{Binding Value, ElementName=slider}" Margin="10,0,0,8" VerticalAlignment="Center"></TextBlock>
                            </StackPanel>
                        </StackPanel>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Label="اشتراک‌گذاری" x:Name="ShareAppBarButton" Tapped="ShareAppBarButton_Tapped">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xE72D;"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton Label="کپی" x:Name="CopyAppBarButton" Tapped="CopyAppBarButton_Tapped">
                <AppBarButton.Icon>
                    <FontIcon Glyph="&#xE8C8;"/>
                </AppBarButton.Icon>
                <AppBarButton.Flyout>
                    <Flyout x:Name="CopyFlyout">
                        <StackPanel>
                            <TextBlock Margin="0,0,0,5">شعر در کلیپ‌بورد کپی شد.</TextBlock>
                            <Button Content="OK" Width="70" Click="CopyFlyoutOK_Click"></Button>
                        </StackPanel>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarToggleButton Label="علاقه" x:Name="FavAppBarButton" Tapped="FavAppBarButton_Tapped" >
                <AppBarToggleButton.Icon>
                    <FontIcon Glyph="&#xE00B;"/>
                </AppBarToggleButton.Icon>
            </AppBarToggleButton>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>

                <VisualState x:Name="ultraWideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1350" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="InnerContent.Margin" Value="175,10,175,0"/>
                        <Setter Target="TabletHeader.Margin" Value="60,0,60,0"/>

                        <Setter Target="BackToggle.Visibility" Value="Visible"/>
                        <Setter Target="PhoneHeader.Visibility" Value="Collapsed"/>
                        <Setter Target="TabletHeader.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="wideView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1000" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="InnerContent.Margin" Value="100,10,100,0"/>
                        <Setter Target="TabletHeader.Margin" Value="40,0,40,0"/>

                        <Setter Target="BackToggle.Visibility" Value="Visible"/>
                        <Setter Target="PhoneHeader.Visibility" Value="Collapsed"/>
                        <Setter Target="TabletHeader.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="mediumView">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="700" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="InnerContent.Margin" Value="0,10,0,0"/>
                        <Setter Target="TabletHeader.Margin" Value="0,0,0,0"/>

                        <Setter Target="BackToggle.Visibility" Value="Visible"/>
                        <Setter Target="PhoneHeader.Visibility" Value="Collapsed"/>
                        <Setter Target="TabletHeader.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="narrowView">
                    <VisualState.Setters>
                        <Setter Target="InnerContent.Margin" Value="0,0,0,0"/>
                        <Setter Target="TabletHeader.Margin" Value="0,0,0,0"/>

                        <Setter Target="BackToggle.Visibility" Value="Collapsed"/>
                        <Setter Target="PhoneHeader.Visibility" Value="Visible"/>
                        <Setter Target="TabletHeader.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>





        <Pivot SelectedIndex="1" SelectionChanged="Pivot_SelectionChanged" x:Name="pivot" Margin="0,-50,0,0">
            <PivotItem Header="">
                <Grid/>
            </PivotItem>
            <PivotItem Header="">

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Grid x:Name="TabletHeader" VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed" Height="100" Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="293*" />
                            <ColumnDefinition Width="500*" />
                            <ColumnDefinition Width="293*" />
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" Orientation="Horizontal" Height="47" Margin="10,35,10,10">
                            <TextBlock HorizontalAlignment="Stretch" TextAlignment="Center" Margin="0" Foreground="{StaticResource NextPrevItemForeground}" VerticalAlignment="Center" Text="&#xE00F;" FontSize="33" Tapped="PrevItemHeader_Tapped" FontFamily="Segoe MDL2 Assets" Height="33" Visibility="{Binding Visibility, ElementName=PrevItemHeader}"  ></TextBlock>
                            <TextBlock x:Name="PrevItemHeader" FontFamily="/Fonts/Yekan.otf#B Yekan" Grid.Column="0" HorizontalAlignment="Stretch" TextAlignment="Center" Foreground="{StaticResource NextPrevItemForeground}" VerticalAlignment="Center" Text="" FontSize="28" Tapped="PrevItemHeader_Tapped" ></TextBlock>
                        </StackPanel>

                        <TextBlock x:Name="CurrentItemHeader" FontFamily="/Fonts/Yekan.otf#B Yekan" Grid.Column="1"  TextWrapping="Wrap" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" Text="" FontSize="35" Margin="0,0,0,0" SizeChanged="CurrentItemHeader_SizeChanged" ></TextBlock>

                        <StackPanel Grid.Column="2" Orientation="Horizontal" Height="47" Margin="10,35,10,10" HorizontalAlignment="Right">
                            <TextBlock x:Name="NextItemHeader" FontFamily="/Fonts/Yekan.otf#B Yekan" HorizontalAlignment="Stretch" TextAlignment="Center" Foreground="{StaticResource NextPrevItemForeground}" VerticalAlignment="Center" Text="" FontSize="28" Tapped="NextItemHeader_Tapped"></TextBlock>
                            <TextBlock HorizontalAlignment="Stretch" TextAlignment="Center" Margin="0" Foreground="{StaticResource NextPrevItemForeground}" VerticalAlignment="Center" Text="&#xE00E;" FontSize="33" Tapped="NextItemHeader_Tapped" FontFamily="Segoe MDL2 Assets" Height="33" Visibility="{Binding Visibility, ElementName=NextItemHeader}"  ></TextBlock>
                        </StackPanel>
                    </Grid>

                    <Grid x:Name="Content" Grid.Row="1">
                        <Grid x:Name="InnerContent">
                            <ItemsControl x:Name="itemsControl" FontSize="{Binding Value, ElementName = slider}" >
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.Template>
                                    <ControlTemplate TargetType="ItemsControl">
                                        <Border>
                                            <ScrollViewer>
                                                <ItemsPresenter/>
                                            </ScrollViewer>
                                        </Border>
                                    </ControlTemplate>
                                </ItemsControl.Template>
                            </ItemsControl>
                            
                        </Grid>
                    </Grid>
                </Grid>
            </PivotItem>
            <PivotItem Header="">
                <Grid/>
            </PivotItem>
        </Pivot>
        <Button x:Name="BackToggle" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,5,0,0"
                      Background="Transparent" Click="BackToggle_Click">
            <FontIcon  
                              FontFamily="Segoe MDL2 Assets"  
                         Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"  
                         Glyph="&#xE0AD;" FontSize="30" />
        </Button>
        <Grid x:Name="PhoneHeader" VerticalAlignment="Top" Visibility="Visible" HorizontalAlignment="Stretch" Height="100" MaxHeight="100" Grid.Row="0" Margin="0,0,0,0" Background="{StaticResource ItemPagePhoneHeaderBackground}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40*" />
                <ColumnDefinition Width="400*" />
                <ColumnDefinition Width="43*" />
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="PhonePrevItemHeader" Grid.Column="0" HorizontalAlignment="Stretch" TextAlignment="Center" Margin="0" Foreground="{StaticResource NextPrevItemForeground}" VerticalAlignment="Center" Text="&#xE00F;" FontSize="33" Tapped="PrevItemHeader_Tapped" FontFamily="Segoe MDL2 Assets" Height="33" ></TextBlock>
            <TextBlock x:Name="PhoneCurrentItemHeader" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" Text="" FontFamily="/Fonts/Yekan.otf#B Yekan" FontSize="25" Margin="0" SizeChanged="PhoneCurrentItemHeader_SizeChanged" TextWrapping="WrapWholeWords" LineHeight="40"  MaxHeight="80" ></TextBlock>
            <TextBlock x:Name="PhoneNextItemHeader" Grid.Column="2" HorizontalAlignment="Stretch" TextAlignment="Center" Margin="0" Foreground="{StaticResource NextPrevItemForeground}" VerticalAlignment="Center" Text="&#xE00E;" FontSize="33" Tapped="NextItemHeader_Tapped"  FontFamily="Segoe MDL2 Assets" Height="33"></TextBlock>
        </Grid>
        <ProgressRing IsActive="False" Width="50" Height="50" Visibility="Collapsed" Opacity="0" x:Name="loadingProgress" />
    </Grid>
</Page>
